<!--  0.物理机-blue 1.容器-lightYellow 2.虚拟机-green 3.docker-purple 4.云主机-deepYellow 没有限制为空 -->
<template>
  <div class="select-container">
    <div
      class="box-container"
      v-for="(item,index) in options"
      :key="index"
      :class="{'is-checked': item.checked}"
      @click="changeChecked(item)"
    >
      <img 
        src="../assets/images/card_checked.png" 
        alt=""
        v-show="item.checked"
        class="checkedImg"
      >
      <div class="content">
        <div :class="'square-'+item.color"></div>
        <div>
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <div
      class="box-container"
      @click="selectAll()"
    >
      <div class="content">
        <div>
          <span>{{isSelectAll ? '怂了，都不要了' : '我全都要'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'CardSelect',
  model: {
    prop: "selections",
    event: "changeChecked"
  },
  props: {
    selections: {
      type: Array,
      default: () => []
    }
  },
  data() {  
    return {
      options: [
        {id: "1", name: "薯片", color: "blue", checked: false},
        {id: "2", name: "糖果", color: "green", checked: false},
        {id: "3", name: "饼干", color: "deepYellow", checked: false},
        {id: "4", name: "饮料", color: "lightYellow", checked: false},
        {id: "5", name: "肉类零食", color: "purple", checked: false},
      ],
      selfSelections: [],//传给父组件的v-model
      isSelectAll: false,
    }
  },
  watch: {
    options: {
      handler(newVal, oldVal) {//数组new和old的val相同
        // console.log(newVal, oldVal);
        let sel = []
        this.options.forEach(item=>{
          if(item.checked) {
            sel.push(item.id)
          }
        })
        this.selfSelections = sel;
        if(this.selfSelections.length == this.options.length) {
          this.isSelectAll = true;
        } else {
          this.isSelectAll = false;
        }
        this.$emit("changeChecked", this.selfSelections)
      },
      deep: true,
    },
    selections: {
      handler(newVal, oldVal) {//数组new和old的val相同
        // console.log(newVal, oldVal, this.selections);
        this.selections.forEach(selItem => {
          this.options.forEach(opItem=>{
            if(selItem == opItem.id) {
              opItem.checked = true;
            }
          })
        })
      },
      immediate: true
    }
  },
  methods: {
    changeChecked(item) {
      item.checked = !item.checked;
      // let selections = [];
      // this.options.forEach(item=>{
      //   if(item.checked) {
      //     selections.push(item.id)
      //   }
      // })
      // this.selections = selections;
    },
    selectAll() {
      let num = 0;
      this.options.forEach(item=>{
        if(item.checked){
          num ++;
        }
      })
      if(num == 0) {
        // let selections = [];
        this.options.forEach(item=>{
          item.checked = !item.checked;
          // selections.push(item.id)
        })
        // this.selections = selections;
      } else if(num == this.options.length){
        this.options.forEach(item=>{
          item.checked = !item.checked;
        })
        // this.selections = [];
      } else {
        // let selections = [];
        this.options.forEach(item=>{
          item.checked = true;
          // selections.push(item.id)
        })
        // this.selections = selections;
      }
    },
  }
}
</script>

<style lang='less' scoped>
.select-container {
  width: 100%;
  // height: 40px;
  // border: 1px solid red;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .box-container {
    cursor: pointer;
    width: 110px;
    height: 40px;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    margin-right: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    .checkedImg {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .content {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .square-blue {
        width: 14px;
        height: 14px;
        background: #096DD9;
        border-radius: 2px;
        margin-right: 6px;
      }
      .square-green {
        width: 14px;
        height: 14px;
        background: #389E0D;
        border-radius: 2px;
        margin-right: 6px;
      }
      .square-deepYellow {
        width: 14px;
        height: 14px;
        background: #D48806;
        border-radius: 2px;
        margin-right: 6px;
      }
      .square-lightYellow {
        width: 14px;
        height: 14px;
        background: #D4B106;
        border-radius: 2px;
        margin-right: 6px;
      }
      .square-purple {
        width: 14px;
        height: 14px;
        background: #531DAB;
        border-radius: 2px;
        margin-right: 6px;
      }
    }
  }
  .box-container:hover {
    // background: #F0FCFF;
    border: 1px solid #219CEA;
  }
  .is-checked {
    background: #F0FCFF;
    border: 1px solid #219CEA;
  }
}
</style>